<template>
  <div class="strut-div">
    <div :id="config.option.id" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
  import echartsFill from 'echarts-liquidfill';
	import autoHover from '../../util/autoHover.js';
  export default {
    name: "commonLiquidChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null,
      }
    },
    methods: {
      initChart() {
        let option = {
          series: [{
            color: [this.config.option.color],
            type: 'liquidFill',
            data: [this.config.option.value],
            name: '',
            radius: '80%',
            center: ['50%', '55%'],
            label: {
              normal: {
                //fontSize:80    //这里也可以设置
                textStyle: {
                  fontSize: 20  //修改字体大小
                }
              }
            },
            outline: {
              show: true,
              borderDistance: 3,
              itemStyle: {
                color: 'none',
                borderColor: this.config.option.color,
                borderWidth: 4,
                shadowBlur: 1,
                shadowColor: 'rgba(0, 0, 0, 0.25)'
              }
            },
            backgroundStyle: {
              color: "#09182D"
            },
            itemStyle: {
              opacity: 0.95,
              shadowBlur: 50,
              shadowColor: 'rgba(0, 0, 0, 0.4)'
            },
          }],
          tooltip: {
            show: true
          }
        };

        setTimeout(() => {
          // option.xAxis.data = ['行政处罚', '周二', '周三', '周四', '周五', '周六', '周日'];
          // option.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320];

          this.chart.setOption(option);
					// this.timeTicket = autoHover.autoHover(this.chart,option,1);
        }, 300);


      },
      refreshChart() {

      },
    },
    mounted() {

      this.chart = echarts.init(document.getElementById(this.config.option.id));
    },
		beforeDestroy() {
			autoHover.stopHover(this.timeTicket);
		}

  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
